class Det {
    constructor() {
        // console.log(this.goodsId);
        this.getdata()
        this.bindEve()
        this.loginStatus()

    }

    // 获取商品id
    goodsId = location.search.split('=')[1];
    // 获取用户ID
    userId = localStorage.getItem('id');
    //发送请求
    async getdata() {
        let {
            status,
            data
        } = await axios.get('http://localhost:8888/goods/item?id=' + this.goodsId)
        // 将数据渲染到页面中
        // console.log(data);
        if (status == 200 && data.code == 1) {
            this.$('.crumb_wrap').innerHTML = `<a herf='#'>${data.info.category
            }</a>`
            this.$('.sku_name').innerHTML = data.info.title
            // console.log(data.info.img_big_logo);
            // 小图
            this.$('.preview_img').querySelector('img').src = data.info.img_big_logo;
            // 大图
            this.$('.big').querySelector('img').src = data.info.img_big_logo;
            this.$('.price').innerHTML = "￥" + data.info.price
            // console.log(data.info.goods_introduce);
            // this.$('.detail_tab_con').innerHTML += `${data.info.goods_introduce}`
        }
    }
    // 触发事件事件
    bindEve() {
        // 轮播图左右箭头
        this.$('.preview_list').addEventListener('click', this.change.bind(this))
        // 点击加入购物车
        this.$('.addCar').addEventListener('click', this.buyCar.bind(this))
        //放大镜
        document.addEventListener('mousemove', this.glass.bind(this))
    }

    // 放大镜
    glass(ele) {
        //滑进去小盒子出现
        this.$('.preview_img').addEventListener('mouseover', this.over.bind(this))
        //划出去小盒子消失
        this.$('.preview_img').addEventListener('mouseout', this.out.bind(this))
        // 获取节点
        let smallBox = this.$('.preview_img');
        let bigBox = this.$('.big');
        let mask = this.$('.mask');
        let smallImg = this.$('.preview_img').querySelector('img');
        let bigImg = this.$('.big').querySelector('img');
        // console.log(smallBox, bigBox, mask, smallImg, bigImg);
        // 获取鼠标相对文档的位置
        let x = ele.pageX;
        let y = ele.pageY;
        // console.log(x);
        // 获取大盒子相对于文档的位置
        let bx = smallBox.offsetLeft - 0;
        let by = smallBox.offsetTop - 0;
        console.log(bx, by);
        // 设置小盒子相对于元素的位置
        let left = x - bx - 100;
        let tops = y - by - 100;
        // 设置边距
        if (left < 0) left = 0;
        if (tops < 0) tops = 0;
        if (left > 200) left = 200;
        if (tops > 200) tops = 200;
        mask.style.top = tops + 'px'
        mask.style.left = left + 'px'
        // 获取大盒子的的最大边距
        let boxX = 300;
        let boxY = 300;
        // 获取大盒子的位置
        let imgX = left / 200 * boxX;
        let imgY = tops / 200 * boxY;
        // 设置大图位置
        bigImg.style.top = -imgY + 'px'
        bigImg.style.left = -imgX + 'px'
    }
    // 显示
    over() {
        this.$('.mask').style.display = 'block'
        this.$('.big').style.display = 'block'
    }
    // 消失
    out() {
        this.$('.mask').style.display = 'none'
        this.$('.big').style.display = 'none'
    }
    // 加入购物车
    buyCar() {
        // 获取token
        let token = localStorage.getItem('token');
        //判断是否登录
        if (!token) location.assign('./login.html')
        // 发送请求
        axios.defaults.headers.common['Authorization'] = token;
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        let pra = `id=${this.userId}&goodsId=${this.goodsId}`
        axios.post('http://localhost:8888/cart/add', pra).then(({
            data,
            status
        }) => {
            // console.log(data, status);
            // 判断
            if (status != 200) return
            if (data.code != 1) location.assign('./login.html')
            layer.confirm('加入购物车成功', {
                    btn: ['进入购物车', '再看看'] //按钮
                }, function () {
                    location.assign('./cart.html')
                },
                function () {
                    location.assign('.list.html')
                });
        })
    }
    // 点击
    change(eve) {
        let index = '';
        let tar = eve.target
        // console.log(tar);
        let list = this.$('.list_item li');
        // console.log(list);
        list.forEach((ele, dex) => {
            if (ele.classList.contains('current')) index = dex
        });
        // console.log(index);
        // 右箭头
        if (tar.classList.contains('arrow_prev')) {
            index--
            if (index < 0) index = 4
            this.selectImg(index);
            // console.log(index);
        }
        // 左箭头
        if (tar.classList.contains('arrow_next')) {
            index++
            if (index > 4) index = 0
            this.selectImg(index);
            // console.log(index);
        }
    }
    // 实现图片的切换
    selectImg(index) {
        // 取消原来有ac类的图片
        this.$('.list_item .current').className = '';
        // 设置最新出来的图片有ac类
        this.$('.list_item li')[index].className = 'current';
    }

    // 判断登录状态 设置用户名
    loginStatus() {
        let status = localStorage.getItem('id')
        let username = localStorage.getItem('uname')
        // console.log(this.$('.fr li a')[0]);
        if (status) {
            this.$('.f10').forEach(ele => {
                this.$('.fr li a')[0].innerHTML = username
            })
        }
    }
    // 封装获取节点的方法
    $(ele) {
        let res = document.querySelectorAll(ele);
        return res.length == 1 ? res[0] : res;
    }
}
new Det